<template>
  <div class="recommend">
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="b in banners" :key="b.bannerId">
        <img :src="b.pic"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    
    <!-- slot插槽 -->
    <list-title>编辑推荐</list-title>

    <!-- 编辑推荐 -->
    <div class="recommendList" v-if="recommedList.length>0">
      <div v-for="list in recommedList" :key="list.id">
        <router-link :to="`/playlist/${list.id}`">
          <img-item :item="list"></img-item>
        </router-link>
      </div>
    </div>
    <music-loading v-else></music-loading><!-- 加载组件 -->

    <!-- 最新音乐 -->
    <list-title>最新音乐</list-title>
    <song-list v-if="newSongList.length>0" :songlist="newSongList" @play="$emit('play',$event)"></song-list>
    <music-loading v-else></music-loading><!-- 加载组件 -->
    
    <!-- 热门MV -->
    <list-title>热门MV</list-title>
    <div class="recommendList" v-if="recommedList.length>0">
      <div v-for="list in mv" :key="list.id">
         <router-link :to="`/mvplay/${list.id}`">
          <img-item :item="list"></img-item>
         </router-link>
      </div>
    </div>
</div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import ImgItem from "@/components/ImgItem";
import SongList from "@/components/SongList";
import MusicLoading from '@/components/MusicLoading'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  data() {
    return {
      recommedList: [],
      newSongList:[],
      hotSingger:[],
      banners:[],
      mv:[],
      swiperOption:{
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  created() {
    this.getRecommendList();
    this.getNewSong();
    this.getbanners();
    this.getSingger();
    this.getMv();
  },
    methods:{
    //获取推荐歌单
    async getRecommendList(){
        let re=await this.axios.get("/personalized?limit=6"); //es7
        this.recommedList=re.result;
    },
    // 歌手
    async getSingger(){
      let re=await this.axios.get("/top/artists?offset=0&limit=9");
      this.hotSingger=re.artists;
    },
    // mv
    async getMv(){
      let re=await this.axios.get("/mv/first?limit=9");
      this.mv=re;
    },
    //获取最新音乐
    async getNewSong(){
      let re=await this.axios.get("/personalized/newsong?limit=10");
        this.newSongList=re.result;
    },
    // 轮播图
    async getbanners(){
      let re=await this.axios.get("/banner?type=2");
        this.banners=re.banners
    }
  },
  components: {
    ListTitle,
    ImgItem,
    SongList,
    MusicLoading,
    Swiper, SwiperSlide
  },
};
</script>

<style lang="less" scoped>
.recommend{
  .recommendList{
    padding-bottom: 70px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &>div{
      width: 33%;
    }
  }
}
.swiper{
  img{
    width:100%;
    display: block;
  }
}
.m-homeft {
  position: relative;
  padding-top: 53.3%;
  margin-top: 4px;
  background: url(//s3.music.126.net/mobile-new/img/recommand_bg_2x.png?d045faf…=)
    no-repeat;
  background-size: contain;
  .ftwrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    text-align: center;
    .log {
      padding-top: 16.9%;
    }
    .logosvg {
      display: block;
      margin: 0 auto;
      width: 230px;
      height: 44px;
    }
    .openapp {
      line-height: 38px;
      border: 1px solid #d33a31;
      border-radius: 38px;
      font-size: 16px;
      color: #d33a31;
      margin: 15px 37px 5px;
    }
    .copyright {
      color: #888;
      font-size: 12px;
      line-height: 16px;
      transform: scale(0.75);
    }
  }
}
</style>

